<template>
    <div class="item">
        <div class="item-header">
            <p>报警高发时间段</p>
            <img src="../img/title_bor_tow.png" alt="">
        </div>
        <div class="item-chart" id="frequencyPeriod"/>
    </div>
</template>

<script>
    import elementResizeDetectorMaker from 'element-resize-detector';
    var erd = elementResizeDetectorMaker(); //创建实例
    export default {
        data() {
            return {
                chart: null,
            }
        },
        mounted() {
            this.chart = this.$echarts.init(document.getElementById('frequencyPeriod'))
            // 绘制图表
            this.chart.setOption({
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        label: {
                            backgroundColor: '#fff'
                        }
                    }
                },
                grid:{
                    top: '15px',
                    left: '15px',
                    right: '15px',
                    bottom: '15px',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {
                            show: true,
                            interval:0,
                            rotate:0,
                            textStyle: {
                                color: '#fff', //x轴data 的颜色
                                fontSize: 9,
                            }
                        },
                        splitLine:{
                            show:false,
                        },
                        data: ['00时', '02时', '04时', '06时', '08时', '10时', '12时', '14时', '16时', '18时', '20时', '22时', '24时']
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        interval: 50,
                        min: 0,
                        max: 200,
                        axisLabel: {
                            textStyle: {
                                color: '#fff', //x轴data 的颜色
                                fontSize: 10,
                            }
                        },
                        "axisTick":{       //y轴刻度线
                            "show":false
                        },
                        "axisLine":{       //y轴
                            "show":false

                        },
                        splitLine:{
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: '#141921',
                                fontSize: 10,
                            }
                        },
                    }
                ],
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        areaStyle: {
                            normal: {
                                color: 'rgba(52,139,247,0.48)' //改变区域颜色
                            }
                        },

                        itemStyle : {
                            normal : {
                                color:'#348bf7', //改变折线点的颜色
                                lineStyle:{
                                    color:'#348bf7' //改变折线颜色
                                }
                            }
                        },
                        data: [0, 12, 21, 34, 50, 70, 110, 120, 132, 101, 134, 190, 130]
                    }
                ]
            });
            erd.listenTo(this.$el,()=>{
                this.chart.resize();
            });
        }
    }
</script>

<style scoped lang="less">
    @import "index";
</style>
